<!--最低端 script 标签中 serurl 字符串中需要赋服务器的url：端口号-->

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
    <title>博客详情</title>
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link href="../static/css/myCss.css" rel="stylesheet">
    <link href="../static/lib/typo.css/typo.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet">
    <link href="../static/lib/prism/prism.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">

</head>
<body>
<nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment my-padding-tb-mini my-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary menu stackable">
            <h2 class="ui header teal item">Blog</h2>
            <a href="#" class="my-item item my-mobile-hide">首页</a>
            <a href="#" class="my-item item my-mobile-hide">标签</a>
            <a href="#" class="my-item item my-mobile-hide">分类</a>
            <a href="#" class="my-item item my-mobile-hide">归档</a>
            <a href="#" class="my-item item my-mobile-hide">关于我</a>

            <div class="right item">
                <div>
                    <div class="ui icon inverted transparent input">
                        <input type="text" placeholder="搜索">
                        <i class="search link icon"></i>
                    </div>
                </div>
                <button class="ui button" style="margin-left: 1em !important;">注册/登陆</button>
            </div>

        </div>
    </div>
    <a href="#" class="menu tooggle ui icon black button my-top-right my-mobile-show"><i class="sidebar icon"></i></a>
</nav>


<div id="waypoint" class="my-padding-tb-large my-container-small animated fadeInUp">
    <div class="my-container">

        <div class="ui container">
            <div class="ui segment top attached">
                <!--头部-->
                <div class="eleven wide column">
                    <div class="ui horizontal link list">

                        <!--作者头像和作者名-->
                        <div class="item">
                            <div class="content name" th:text="${blog.user.nickname}"><a href="#">张泽</a></div>

                        </div>
                        <!--文章上传时间-->
                        <div class="item">
                            <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2017-10-01</span>
                        </div>

                        <!--浏览量-->
                        <div class="item">
                            <i class="eye icon"></i> <span th:text="${blog.viewNum}">2342</span>
                        </div>
                    </div>
                </div>
            </div>

            <!--            内容-->
            <div class="ui segment attached padded ">
                <h2 class="ui header center aligned" style="padding-bottom: 2em !important;" th:text="${blog.title}">
                    SpringMVC--二、SpringMVC请求参数绑定和常用注解</h2>
                <div id="content" class="js-toc-content my-padding-lr-responsive typo typo-selection" th:utext="${blog.content}">
                    <h1>START:</h1>
                    <h2>本章主要内容</h2>
                    <ol start=''>
                        <li><p>定义关键的应用层概念：</p>
                            <ol start=''>
                                <li>应用程序所需要的网络服务。</li>
                                <li>客户和服务器。</li>
                                <li>进程。</li>
                                <li>运输层接口。</li>

                            </ol>
                        </li>
                        <li><p>详细考察几种网络应用程序：</p>
                            <ol start=''>
                                <li><code>Web</code></li>
                                <li>电子邮件</li>
                                <li>DNS</li>
                                <li>对等文件分发</li>
                                <li>视频流</li>

                            </ol>
                        </li>
                        <li><p>开发运行在 TCP 和 UDP 上的网络应用程序。</p>
                            <ul>
                                <li>特别是要学习套接字接口（socket）。</li>

                            </ul>
                        </li>

                    </ol>
                    <h2>2.1 应用层协议原理</h2>
                    <pre><code class="language-css">p { color: red }</code></pre>

                    <ul>
                        <li><p>研发网络应用程序的核心是写出<strong>能够运行在不同端系统和通过网络彼此通信的程序</strong>。</p>
                        </li>
                        <li><p>有两种模式：</p>
                            <ol start=''>
                                <li>在 <code>Web</code> 应用程序中，有两个互相通信的不同程序：一个是运行在用户主机上的浏览器程序；另一个是运行在 <code>Web</code>
                                    服务器主机上的 <code>Web</code> 服务器程序。
                                </li>
                                <li>P2P 文件共享系统。</li>

                            </ol>
                        </li>
                        <li><p>
                            在研发新应用程序的时候，你需要编写将在多台端系统上运行的软件。重要的是，你不需要、也不能写在网络核心设备（如路由器）或链路层交换机上运行的程序。因为网络核心设备并不在应用层上起作用，而只在较低层起作用，特别是在网络层及下面层次起作用。这种将应用软件限制在端系统的基本设计方法，促进了大量的网络应用程序的研发和部署。</p>
                            <blockquote><p>
                                我的理解是：在研发新应用程序时，只有应用层是对软件开发人员是可见的，其它层次是一种黑箱；或者说只需要考虑端到端之间的事情。而这种设计对于开发人员是种好事，因为不需要再去考虑应用层以下的事情了，将会大大降低代码的编写量。</p>
                            </blockquote>
                        </li>

                    </ul>
                    <h3>2.1.1 网络应用程序体系结构</h3>
                    <ul>
                        <li><p>首先需要记住：应用程序的体系结构于网络的体系结构是明显不同的。</p>
                            <ul>
                                <li><p>网络的体系结构是由：应用层、运输层、网络层、数据链路层、物理层构成的。</p>
                                </li>
                                <li><p>应用程序的体系结构（application architecture）有应用程序研发者设计，规定了如何再各种端系统上组织该程序。一般选择两种主流的体系：</p>
                                    <ul>
                                        <li>客户 - 服务器体系结构。（client - server architecture）。</li>
                                        <li>对等体系结构（P2P architecture）。</li>

                                    </ul>
                                </li>

                            </ul>
                        </li>

                    </ul>
                    <h4>客户 - 服务器体系结构</h4>
                    <ul>
                        <li><p>有一个总是打开的主机称为服务器（server）,它服务于来自于其他成为<code>客户</code>的主机的请求。</p>
                            <ul>
                                <li><code>Web</code>应用程序：其中，总是打开的<code>Web</code>服务器服务来自浏览器（运行在客户主机上）的请求，它向该客户发送所请求的对象作为相应。
                                </li>

                            </ul>
                        </li>
                        <li><p>利用客户 - 服务器体系结构，客户之间不直接通信</p>
                        </li>
                        <li><p>该服务器具有固定的、周知的地址，该地址称为 <code>IP 地址</code>。</p>
                        </li>
                        <li><p>因为该服务器具有固定、周知的地址，并且该服务器一直打开，所以客户总是能够通过向该服务器的<code>IP地址</code>发送分组来与其联系。</p>
                        </li>
                        <li><p>使用该结构的应用程序包括：</p>
                            <ul>
                                <li><code>Web</code></li>
                                <li><code>ftp</code></li>
                                <li><code>Telnet</code></li>
                                <li><code>E-mail</code></li>

                            </ul>
                        </li>
                        <li><p>在一个客户 - 服务器应用中，常常会出现一台单独的服务器主机跟不上它所有客户请求的情况，为此配备大量主机的数据中心（data
                            center）常被用于创建强大的虚拟服务器。如：</p>
                            <ul>
                                <li><p>搜索引擎。</p>
                                </li>
                                <li><p>因特网商务服务。</p>
                                </li>
                                <li><p>基于<code>Web</code> 的电子邮件。</p>
                                </li>
                                <li><p>社交网络。</p>
                                    <p>&nbsp;</p>
                                </li>

                            </ul>
                        </li>

                    </ul>
                    <h4>P2P 体系结构</h4>
                    <ul>
                        <li><p>对位于数据中心的专用服务器有最小的依赖，有的甚至没有依赖。</p>
                        </li>
                        <li><p>应用程序在间断连接的主机对之间使用直接通信，这些主机对被称为<code>对等方</code>。</p>
                            <ul>
                                <li><p>这些对等方并不为<code>ISP</code>所有，相反却为用户控制的主机所有。</p>
                                </li>
                                <li><p>大多数对等方存在于：</p>
                                    <ul>
                                        <li>家庭</li>
                                        <li>大学</li>
                                        <li>办公室</li>

                                    </ul>
                                </li>
                                <li><p>因为这些对等方通信不必通过专门的服务器体系结构，该体系结构被称为<code>对等方到对等方</code>。</p>
                                </li>

                            </ul>
                        </li>
                        <li><p>许多目前流行的、流量密集型的应用都是<code>P2P</code>体系结构的，包括：</p>
                            <ul>
                                <li>文件共享。</li>
                                <li>对等方协助下载加速器（如迅雷）。</li>
                                <li>因特网电话和视频会议（如<code>Skype</code>）。</li>

                            </ul>
                        </li>
                        <li><p><code>P2P</code>体系结构最引人入胜的特性之一就是它们的自扩展性（self - scalability）。</p>
                            <ul>
                                <li>在一个<code>P2P</code>文件共享应用中，尽管每个对等方都由于请求文件产生工作负载，但每个对等放通过向其他对等方分发文件也为系统增加服务能力。</li>

                            </ul>
                        </li>
                        <li><p><code>P2P</code>体系结构也是有成本效率的，因为它们通常不需要庞大的服务器基础设施和服务器带宽。</p>
                            <ul>
                                <li>这与具有数据中心的客户 - 服务器设计形成了鲜明的对比。</li>

                            </ul>
                            <blockquote><p>吐槽：迅雷算是<code>P2P</code>中的奇葩了，作为一个<code>P2P</code>下载器，其拥有着大量的数据中心来供用户离线下载。而这些数据中心下载占用了整个体系结构的大量带宽；但是又不提供给非迅雷用户甚至不提供给迅雷的普通用户下载，导致不少BT下载站明确的提示不支持迅雷下载。
                            </p>
                            </blockquote>
                        </li>
                        <li><p>未来的<code>P2P</code>应用由于高度非集中式结构，面临着安全性、性能、可靠性的挑战。</p>
                        </li>

                    </ul>
                    <h4>混合结构</h4>
                    <p>某些应用具有混合的体系结构，服务器被用于跟踪用户的<code>IP地址</code>，但用户到用户之间的报文在用户主机之间直接发送。</p>
                    <h3>2.1.2 进程通信</h3>
                    <p>在构建网络应用程序前，我们需要对运行在多个端系统的程序是如何互相通信的情况有个基本了解。</p>
                    <ul>
                        <li><p>进行通信的实际上是进程（process）。</p>
                        </li>
                        <li><p>一个进程可以被认为是运行在端系统中的一个程序。</p>
                        </li>
                        <li><p>在同一个端系统的进程间通信机制</p>
                            <ul>
                                <li>当多个进程运行在相同的端系统上时，它们使用进程间通信机制相互通信。</li>
                                <li>进程间通信规则由端系统上的操作系统确定。</li>

                            </ul>
                        </li>

                    </ul>
                    <blockquote><p>在本书中并不特别关注同一台主机上的进程间的通信，而关注运行在不同端系统（可能具有不同的操作系统）上的进程间的通信。</p>
                    </blockquote>
                    <ul>
                        <li><p>在不同端系统进程间通信机制</p>
                            <ul>
                                <li>通过跨越计算机网络交换报文（massage）而相互通信。</li>
                                <li>发送进程生成并向网络中发送报文。</li>
                                <li>接收进程接收这些报文并可能通过回送报文进行响应。</li>

                            </ul>
                        </li>

                    </ul>
                    <h4>1. 客户和服务器进程</h4>
                    <ul>
                        <li><p>网络应用程序由成对的进程组成，这些进程通过网络相互发送报文。</p>
                            <p>例如：</p>
                            <ul>
                                <li>在<code>Web</code>应用程序中，一个客户浏览器进程与一台<code>Web</code>服务器进程交换报文。</li>
                                <li>在一个<code>P2P</code>文件共享系统中，文件从一个对等方传输到另一个对等方。</li>

                            </ul>
                        </li>
                        <li><p>对每对通信进程，通常将这两者，一者定义为客户（client），一者定义为服务器（server）。</p>
                            <ul>
                                <li><p>发起通信的进程被标记为客户。</p>
                                </li>
                                <li><p>在会话开始后，等待联系的进程是服务器。</p>
                                    <blockquote><p>以女神和舔狗举例：舔狗问女神：”在吗？“，女神回复：”我去洗澡。”</p>
                                        <p>在这之中，舔狗是客户，而女神是服务器。（大雾）</p>
                                    </blockquote>
                                </li>
                                <li><p>例如：</p>
                                    <ul>
                                        <li><p>在<code>Web</code>中，浏览器是一个客户进程，<code>Web</code>服务器是一个服务器进程。</p>
                                        </li>
                                        <li><p>在<code>P2P</code>中，下载文件的对等方标识为客户，上传文件的对等方标识为服务器。</p>
                                            <ul>
                                                <li>在这其中，我们可以发现，一个进程能够既是客户，又能是服务器。</li>

                                            </ul>
                                        </li>

                                    </ul>
                                </li>
                                <li><p>在不致混淆的情况下，我们有时也使用术语：”应用程序的客户端和服务器端“。</p>
                                </li>

                            </ul>
                        </li>

                    </ul>
                    <h4>2. 进程与计算机网络之间的接口</h4>
                    <ul>
                        <li><p>进程通过一个称为套接字（socket）的软件接口向网络发送报文和从网络接收报文。</p>
                            <blockquote><p>明明就是一个插座desi。</p>
                            </blockquote>
                        </li>
                        <li><p>套接字是同一台主机内应用层与运输层的接口。</p>
                            <ul>
                                <li><p>由于该套接字是建立在网络应用程序的可编程接口，因此套接字也称为应用程序和网络之间的应用程序编程接口（Application Programming
                                    Interface，API）。</p>
                                </li>
                                <li><p>应用程序开发者可以控制套接字在应用层的一切，但是对该套接字的运输层端近乎没有控制权。</p>
                                </li>
                                <li><p>应用程序开发者对与运输层几乎没有控制权。</p>
                                    <ul>
                                        <li><p>能够设置的仅有：</p>
                                            <ol start=''>
                                                <li>选择运输层协议。</li>
                                                <li>也许能设置几个运输层参数。</li>

                                            </ol>
                                        </li>

                                    </ul>
                                </li>

                            </ul>
                        </li>

                    </ul>
                    <h4>3. 进程寻址</h4>
                    <p>在一台主机上运行的进程为了向另一台主机上运行的进程发送分组，接收进程需要有一个地址。</p>
                    <p>该地址由两部分组成：</p>
                    <ol start=''>
                        <li>主机的地址。</li>
                        <li>在目的主机中指定接收进程的标识符。</li>

                    </ol>
                    <p>第一部分即<code>IP地址</code> 。此时，我们只需要知道，<code>IP地址</code>是一个 32 比特的量，且能够唯一地标识该主机。</p>
                    <p>为知道发送进程在接收主机上的接收进程（即接收套接字），第二部分即为端口号。</p>
                    <ul>
                        <li><p>已经为流行的应用分配了特定的端口号，如：</p>
                            <ol start=''>
                                <li>80 为<code>Web</code>服务器的标识。</li>
                                <li>25 为使用 <code>SMTP</code>协议的邮箱服务器进程的标识。</li>
                                <li>相关周知的端口号都能够在<a href='http://www.iana.org/'>端口号查询</a> 找到。</li>

                            </ol>
                        </li>

                    </ul>
                </div>

                <!--                标签-->
                <div class="my-padding-lr-responsive">
                    <label class=" ui basic teal left pointing label" th:each="tag : ${blog.tagList}" th:text="${tag.tagName}">计算机网络</label>
                </div>
                <!--                赞赏-->
<!--                <div class="ui segment basic center aligned">-->
<!--                    <button id="pay-button" class="ui basic orange button center aligned circular">赞赏</button>-->

<!--                </div>-->
                <!--                QRCode-->
<!--                <div class="ui flowing popup transition hidden pay-QR">-->
<!--                    <div class="ui basic orange label">-->
<!--                        <div class="ui images" style="font-size: inherit">-->
<!--                            <div class="image">-->
<!--                                <img src="../static/images/QRCode.png" class="ui image rounded bordered"-->
<!--                                     style="width: 120px">-->
<!--                                <div>支付宝</div>-->

<!--                            </div>-->
<!--                            <div class="image">-->
<!--                                <img src="../static/images/QRCode.png" class="ui image rounded bordered"-->
<!--                                     style="width: 120px">-->
<!--                                <div>微信</div>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                    </div>-->
<!--                </div>-->
            </div>

            <div class="ui message attached positive">
                <!--                博客信息-->
                <div class="ui grid middle aligned">

                    <div class="eleven wide column">
                        <ul>
                            <li>作者：<span th:text="${blog.user.nickname}">张泽</span><a href="#" th:href="@{/about}" target="_blank">（联系作者）</a></li>
                            <li>发表时间：<span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2019-10-02 09:08</span></li>
                        </ul>
                    </div>

<!--                    <div class="five wide column">-->
<!--                        <img src="../static/images/QRCode.png" alt=""-->
<!--                             class="ui image rounded bordered QR right floated">-->
<!--                    </div>-->
                </div>
            </div>

<!--            <div class="ui attached bottom segment ">-->
<!--                &lt;!&ndash;                留言板列表&ndash;&gt;-->
<!--                <div id="comment-container" class="ui segment teal">-->
<!--                    <div th:fragment="commentList">-->
<!--                        <div class="ui threaded comments" style="max-width: 100%;">-->
<!--                            <h3 class="ui dividing header">Comments</h3>-->
<!--                            <div class="comment" th:each="comment : ${comments}">-->
<!--                                <div class="content">-->
<!--                                    <a class="author">-->
<!--                                        <span th:text="${comment.nickname}">Matt</span>-->
<!--                                        <div class="ui label mini basic teal left pointing my-padded" th:if="${comment.adminComment}">博主</div>-->
<!--                                    </a>-->
<!--                                    <div class="metadata">-->
<!--                                        <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>-->
<!--                                    </div>-->
<!--                                    <div class="text" th:text="${comment.content}">-->
<!--                                        How artistic!-->
<!--                                    </div>-->
<!--                                    <div class="actions">-->
<!--                                        <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">Reply</a>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">-->
<!--                                    <div class="comment" th:each="reply : ${comment.replyComments}">-->
<!--                                        <div class="content">-->
<!--                                            <a class="author" >-->
<!--                                                <span th:text="${reply.nickname}">小红</span>-->
<!--                                                <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${reply.adminComment}">博主</div>-->
<!--                                                &nbsp;<span th:text="|@ ${reply.parentComment.nickname}|" class="m-teal">@ 小白</span>-->
<!--                                            </a>-->
<!--                                            <div class="metadata">-->
<!--                                                <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>-->
<!--                                            </div>-->
<!--                                            <div class="text" th:text="${reply.content}">-->
<!--                                                How artistic!-->
<!--                                            </div>-->
<!--                                            <div class="actions">-->
<!--                                                <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div id="comment-form" class="ui form">-->
<!--                    <input type="hidden" name="blog.id">-->
<!--                    <input type="hidden" name="parentComment.id" value="-1">-->
<!--                    <div class="field">-->
<!--                        <textarea name="content" placeholder="输入回复内容"></textarea>-->
<!--                    </div>-->
<!--                    <div class="fields">-->
<!--                        <div class="field my-mobile-width my-margin-bottom-mini">-->
<!--                            <div class="ui left icon input">-->
<!--                                <i class="user icon"></i>-->
<!--                                <input type="text" name="nickname" placeholder="姓名">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="field my-mobile-width my-margin-bottom-mini">-->
<!--                            <div class="ui left icon input">-->
<!--                                <i class="mail icon"></i>-->
<!--                                <input type="email" name="email" placeholder="邮箱">-->
<!--                            </div>-->

<!--                        </div>-->
<!--                        <div class="field my-mobile-width my-margin-bottom-mini">-->
<!--                            <button id="cpb" type="button" class="ui teal button my-mobile-width"><i class="edit icon"></i>发布</button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </div>
</div>

<div id="toolbar" class="my-padded-large my-right-bottom my-absolute-position">
    <div class="ui vertical icon buttons ">
        <button type="button" class="ui teal toc button ">目录</button>
        <a href="#" type="button" id="up" class="ui icon button"><i class="chevron up icon"></i></a>
    </div>
</div>

<div class="ui flowing popup transition hidden toc-container">
    生成内容
    <ol class="js-toc">

    </ol>
</div>
<div id="test" class="ui flowing popup transition hidden wechat-QR QR ">
    <!--    <img src="./static/images/pika.jpg" alt="" class="ui image rounded QR">-->
</div>

<!--代码高亮-->
<script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>

<!--CDN-->
<!--jq-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!--ui-->
<script src="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.js"></script>
<!--目录-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>
<!--页面滚动-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
<!--捕获页面滚动地-->
<script src="https://cdn.bootcss.com/waypoints/4.0.1/jquery.waypoints.min.js"></script>

<script>
    // document.getElementById("cpb").onclick=function () {
    //     var boo = $('.ui.form').form('validate form');
    //     // var boo = false;
    //     if (boo) {
    //         console.log("校验成功");
    //         postData();
    //     } else {
    //         console.log("校验失败");
    //     }
    //
    // };



    $('.menu.tooggle').click(function () {
        $('.my-item').toggleClass('my-mobile-hide');
    });

    $('#pay-button').popup({
        popup: $('.pay-QR.popup'),
        on: 'click',
        position: 'left center'
    });

    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
        // For headings inside relative or absolute positioned containers within content.
        hasInnerContainers: true,
    });


    $('.toc.button').popup({
        popup: $('.toc-container.popup'),
        on: 'click',
        position: 'left center'
    });

    // $('.wechat').popup({
    //     popup: $('.wechat-QR.popup'),
    //     position: 'left center',
    //     on: 'click'
    // });
    // var serurl = "locahost:端口号";
    // var url = /*[[@{blog/{id}(id=${blog.id})}]]*/"";
    // var qrcode = new QRCode("test", {
    //     text: serurl + url,
    //     width: 80,
    //     height: 80,
    //     colorDark: "#000000",
    //     colorLight: "#ffffff",
    //     correctLevel: QRCode.CorrectLevel.H
    // });

    $('#up').click(function () {
        $(window).scrollTo(0, 500);
    });

    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        handler: function (direction) {
            if (direction === "down") {
                $('#toolbar').show(100);
            } else {
                $('#toolbar').hide(500);
            }
        }
    });
    // $('.ui.form').form({
    //     fields: {
    //         title: {
    //             identifier: 'content',
    //             rules: [{
    //                 type: 'empty',
    //                 prompt: '请输入评论内容'
    //             }]
    //         },
    //         content: {
    //             identifier: 'nickname',
    //             rules: [{
    //                 type: 'empty',
    //                 prompt: '请输入您的昵称'
    //             }]
    //         },
    //         typeId: {
    //             identifier: 'email',
    //             rules: [{
    //                 type: 'email',
    //                 prompt: '请填写正确的邮箱地址'
    //             }]
    //         }
    //     }
    // });
    //加载评论
    // $(function () {
    //     $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"comments/20");
    // });

    // function postData() {
    //     $("#comment-container").load(/*[[@{/comments}]]*/"", {
    //         "parentComment.id": $("[name='parentComment.id']").val(),
    //         "blog.id": $("[name='blog.id']").val(),
    //         "nickname": $("[name='nickname']").val(),
    //         "email": $("[name='email']").val(),
    //         "content": $("[name='content']").val()
    //     }, function (responseText, statusText, xhr) {
    //         $(window).scrollTo($('#comment-container'), 500);
    //         clearContent();
    //     });
    // }

    // function clearContent() {
    //     $("[name='content']").val("");
    //     $("[name='parentComment.id']").val(-1);
    //     $("[name='content']").attr("placeholder", "请输入评论信息 ...");
    //
    // }
    //
    // function reply(obj) {
    //     var commentId = $(obj).data('commentid');
    //     var commentNickname = $(obj).data('commentnickname');
    //
    //     $("[name='content']").attr("placeholder", "@" + commentNickname).focus();
    //     $("[name='parentComment.id']").val(commentId);
    //     $(window).scrollTo($('#comment-form'), 500);
    // }

</script>
</body>
</html>